<template>
    <view>
        <!-- 搜索框 -->
           <view class="search-box">
             <!-- 使用 uni-ui 提供的搜索组件 -->
             <uni-search-bar @input="input" cancelButton="none" radius="20" focus="true"></uni-search-bar>
           </view>
           <!-- 搜索历史 -->
           <view class="history-container" v-if="searchResults.length === 0">
             <!-- 搜索title -->
             <view class="history-title">
               <text>搜索历史</text>
               <uni-icons type="trash" size="18" @click="cleanHistory"></uni-icons>
             </view>
             <!-- 历史搜索关键词 -->
             <view class="history-keywords">
               <uni-tag :text="item" v-for="(item, i) in historyKeywords" :key="i" @click="gotoGoodsList(item)"></uni-tag>
             </view>
           </view>
           <!-- 搜索列表 -->
           <view class="search-results-list" v-else>
             <view class="search-results-item" v-for="(item, i) in searchResults.goods" :key="i" @click="gotoDetail(item.goods_id)">
               <view class="search-results-item-name">
                 {{item.goods_name}}
               </view>
               <uni-icons type="arrowright" ></uni-icons>
             </view>
           </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                // 定时器id
                timerId : null,
                 // 搜索结果列表
                searchResults: [],
                // 关键词
                kw:'',
                // 搜索关键词的历史记录
                historyKeywords: []
            };
        },
        onLoad() {
            // 从本地读取历史搜素记录
            this.historyKeywords = JSON.parse(uni.getStorageSync('kw') || '[]')
            },
        methods:{
            // 点击历史记录跳转到商品列表页
            gotoGoodsList(kw){
                uni.navigateTo({
                    url:'/subpkg/goods_list/goods_list?query=' + kw
                })
            },
            // 清空历史记录
            cleanHistory(){
                this.historyKeywords = []
                // 清空本地存储中的历史记录数据
                uni.setStorageSync('kw',[])
            },
            // 搜素输入事件处理函数
            input(value){
                // console.log(value);
                clearTimeout(this.timerId)
                // console.log('清理的id',this.timerId);
              this.timerId = setTimeout(()=>{
                    // console.log('搜索');
                    this.kw = value
                    // 如果输入为空
                    if(!this.kw.trim()) {
                        // 清空列表
                        this.searchResults = []
                        return
                    }
                     this.getSearchResults()
                },1000)
                // console.log('重新计时',this.timerId);
            },
            // 搜素处理
          async  getSearchResults(){
                const {data:res} = await uni.$http.get('/goods/search',{query:this.kw})
                if(res.meta.status !== 200) return uni.$showMsg()
                this.searchResults = res.message
                // console.log(this.searchResults);
                
                // 搜索结束之后,添加数据到搜素历史
                this.saveSearchHistory()
            },
            // 点击搜索结果,跳转到商品详情页
            gotoDetail(id){
                // console.log(id);
                 uni.navigateTo({
                    // 指定详情页面的 URL 地址，并传递 goods_id 参数
                    url: '/subpkg/goods_detail/goods_detail?goods_id=' + id
                  })
            },
            saveSearchHistory(){
                // unshift 放数组开始位置
                // this.historyKeywords.unshift(this.kw)
                // 判断一下关键词是否搜素果
                const index = this.historyKeywords.indexOf(this.kw)
                // 没找到放开头
                if(index<0) {
                    this.historyKeywords.unshift(this.kw)
                }else {
                    // 找到了就删除
                    this.historyKeywords.splice(index,1)
                    this.historyKeywords.unshift(this.kw)
                }
                // 将历史记录持久化存储在本地存储中
                uni.setStorageSync('kw', JSON.stringify(this.historyKeywords))
            },
            
           
            
        }
    }
</script>

<style lang="scss">
.search-box {
  background-color: #c00000;
  position: sticky;
  top: 0;
  z-index: 9;
}

.history-container {
  .history-title{
    display: flex;
    height: 80rpx;
    justify-content: space-between;
    align-items: center;
    padding: 0 20rpx;
    border-bottom: 1rpx solid #efefef;
  }
  .history-keywords{
    display: flex;
    flex-wrap: wrap;
    margin-top: 10rpx;
    .uni-tag {
      margin: 10rpx;
    }
  }
}

.search-results-list {
  padding: 0 20rpx;
  .search-results-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1rpx solid #efefef;
    height: 90rpx;
    .search-results-item-name {
      font-size: 24rpx;
      // 文字不允许换行（单行文本）
      white-space: nowrap;
      // 溢出部分隐藏
      overflow: hidden;
      // 文本溢出后，使用 ... 代替
      text-overflow: ellipsis;
      margin-right: 3px;
    }
  }
}
</style>
